<template>
    <div>
        <el-table :data="permsInfo" border style="width: 100%;" ref="multipleTable">
            <el-table-column prop="id" label="ID" width="200">
            </el-table-column>
            <el-table-column prop="name" label="权限名称">
            </el-table-column>
            <el-table-column prop="path" label="接口路径">
            </el-table-column>
            <el-table-column prop="perms" label="权限英文">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
                <template slot-scope="scope">
                    <el-tag type="success" v-show="scope.row.status == 1">正常</el-tag>
                    <el-tag type="danger" v-show="scope.row.status == 2">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="140">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="changeStatus(scope.row, 2)" v-show="scope.row.status != 2">删除</el-button>
                    <el-button type="text" size="small" @click="changeStatus(scope.row, 1)" v-show="scope.row.status != 1">恢复</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑权限" :visible.sync="editDialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="editPermsItem" label-width="80px">
                <el-form-item label="权限名称">
                    <el-input v-model="editPermsItem.name"></el-input>
                </el-form-item>
                <el-form-item label="权限英文">
                    <el-input v-model="editPermsItem.perms"></el-input>
                </el-form-item>
                <el-form-item label="接口路径">
                    <el-input v-model="editPermsItem.path"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editPermsItem.status">
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="禁用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "PermsItem",
    props: ['permsInfo'],
    data() {
        return {
            // 展示删除页面
            deleteVisible: false,
            // 删除的信息
            deleteInfo: {},
            editDialogVisible: false,
            editPermsItem: {}
        }
    },
    methods: {
        // 查看
        handleClick(data) {
            console.log(data)
        },
        // 展示删除
        showDelete(data) {
            this.deleteInfo = data
            this.deleteVisible = true
        },
        // 删除
        async subDelete() {
            let res = await this.$store.dispatch('deleteTableInfo', this.deleteInfo.id)
            if (res.success) {
                // 重新渲染数据
                this.$emit('getTableData')
                this.$message.success(res.message)
            }
            else this.$message.error(res.message)
        },
        edit(item) {
            this.editPermsItem = item
            this.editDialogVisible = true
        },
        handleClose(done) {
            done()
            setTimeout(() => {
                this.editPermsItem = {}
            }, 300)
        },
        async save() {
            let res = await this.$store.dispatch("updatePerms", this.editPermsItem)
            if (res.success) {
                this.$message.success(res.message)
                this.$bus.$emit("refreshPermsData")
            }
            else this.$global.resError(res)
        },
        changeStatus(item, status){
            this.editPermsItem = item
            this.editPermsItem.status = status
            this.save()
        }
    },
    computed: {
        tableData() {
            return this.$store.state.table.tableData
        }
    }
}
</script>

<style scope>
.el-collapse-item__header {
    font-size: 1rem;
    font-weight: 550;
    color: #726464;
}

/* 设置滚动条宽度和高度 */
.el-table__body-wrapper::-webkit-scrollbar {
    width: 8px;
    /* 横向滚动条 */
    height: 8px;
    /* 纵向滚动条 必写 */
}

/* 设置滚动条样式 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #dde;
    border-radius: 3px;
}
</style>